<template>
	<view>
		<!-- <u-tabs :list="list" :is-scroll="false" @change="change" style="margin-bottom: 20rpx;"> -->
		<!-- </u-tabs> -->
		<u-modal :show="show" :title="title" :content='content' @confirm="show=false"></u-modal>
		<!-- <view class="uni-padding-wrap uni-common-mt"> -->
		<!-- #ifndef MP-ALIPAY -->
		<!--  <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view> -->
		<!-- #endif -->
		<!-- </view> -->
		<u-grid :col="1" v-if="current==0">

			<u-grid-item style="" v-for="(item,index) in videoList" :key="index" style="margin-top: 20rpx;">
				<el-card class="box-card" style="">
					<view style="text-align: center;margin-bottom: 30rpx;">{{item.title}}</view>
					<video :autoplay="index==0?true:false" id="myVideo${index}" style="" :src="item.url"
						@error="videoErrorCallback"  enable-danmu danmu-btn controls
						@pause="pas(index)" @play='videoPlay(index)'></video>
					<!-- 	<video :autoplay="index==0?true:false" id="myVideo${index}" style="" :src="item.url"
							@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls
							@pause="pas(index)" @play='videoPlay(index)'></video> -->
				</el-card>
			</u-grid-item>

			<!-- <u-grid-item>
				<video :autoplay="true" id="myVideo" style="width: 100%;" src="https://oss.qingqikeji.top/5269/1.mp4"
					@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
			</u-grid-item>
			<u-grid-item>
				<video :autoplay="true" id="myVideo" style="width: 100%;" src="https://oss.qingqikeji.top/5269/1.mp4"
					@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
			</u-grid-item> -->
		</u-grid>
		<!-- <view class="comment" v-for="(res, index) in commentList" :key="res.id">
			<view class="left">
				<image :src="res.url" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.name }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
						<view class="num">{{ res.likeNum }}</view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)">
						</u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
					</view>
				</view>
				<view class="content">{{ res.contentText }}</view>
				<view class="reply-box">
					<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
						<view class="username">{{ item.name }}</view>
						<view class="text">{{ item.contentStr }}</view>
					</view>
					<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
						共{{ res.allReply }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view>
				</view>
				<view class="bottom">
					{{ res.date }}
					<view class="reply">回复</view>
				</view>
			</view>
		</view> -->



	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				danmuList: [{
						// text: 'wtq大撒比',
						// color: '#ff0000',
						// time: 1
					},
					{
						// text: 'wtq大撒比',
						// color: '#ff00ff',
						// time: 3
					}
				],
				danmuValue: '',
				title: '素胚勾勒出青花，笔锋浓转淡',
				subTitle: '2020-05-15',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				commentList: [],
				videoList: [],
				list: [{
					name: '大哥远'
				}, {
					name: '猕猴桃'
				}, {
					name: 'wtq',
					count: 5
				}],
				current: '0',
				loading: false,
				show: false,
				title: '提示',
				content: '    本站所有视频由 抖音 “大远哥” 提供\n温馨提示:使用qq浏览器观看可以选择后台听书模式!'
			}
		},

		onLoad() {
			var that = this
			uni.request({
				url: 'https://qinshi.qingqikeji.top/prod-api/system/vedio/list',
				method: 'GET',
				success: (res) => {
					that.videoList = res.data.rows
				}
			})
			this.show=true

		},
		onPullDownRefresh() {
			var that = this
			uni.request({
				url: 'https://qinshi.qingqikeji.top/prod-api/system/vedio/list',
				method: 'GET',
				success: (res) => {
					that.videoList = res.data.rows
				}
			})
			uni.stopPullDownRefresh();
			uni.showToast({
				title: '刷新成功'
			})
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif

			this.getComment();
		},
		methods: {
			change(index) {
				this.current = index;
				console.log(this.current)
			},
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			pas(index) {
				// alert(index)
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			// 跳转到全部回复
			toAllReply() {
				uni.navigateTo({
					url: '/pages/template/comment/reply'
				});
			},
			// 点赞
			getLike(index) {
				this.commentList[index].isLike = !this.commentList[index].isLike;
				if (this.commentList[index].isLike == true) {
					this.commentList[index].likeNum++;
				} else {
					this.commentList[index].likeNum--;
				}
			},
			test1() {
				console.log(this.videoList)
			},
			videoPlay(index) {
				if (this.playIdx !== '') {
					console.log(`暂停上一个下标为${this.playIdx}的视频`);
					// let videoContext = uni.createVideoContext(`myVideo{this.playIdx}`)

					this.videoContext.pause()
				}

				this.playIdx = index
			},
			// 评论列表
			getComment() {
				this.commentList = [{
						id: 1,
						name: 'wtq',
						date: '12-25 18:58',
						contentText: '我是大撒比',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 12,
						likeNum: 54188,
						isLike: false,
						replyList: [{
								name: 'lym',
								contentStr: '太对了哥'
							},
							{
								name: 'lmy',
								contentStr: '哥太对'
							}
						]
					},
					// {
					// 	id: 2,
					// 	name: '叶轻眉1',
					// 	date: '01-25 13:58',
					// 	contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
					// 	allReply: 0,
					// 	likeNum: 11,
					// 	isLike: false,
					// 	url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					// },
					// {
					// 	id: 3,
					// 	name: '叶轻眉2',
					// 	date: '03-25 13:58',
					// 	contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
					// 	allReply: 0,
					// 	likeNum: 21,
					// 	isLike: false,
					// 	allReply: 2,
					// 	url: '../../../static/logo.png',
					// 	replyList: [
					// 		{
					// 			name: 'uview',
					// 			contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
					// 		},
					// 		{
					// 			name: '豆包',
					// 			contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
					// 		}
					// 	]
					// },
					// {
					// 	id: 4,
					// 	name: '叶轻眉3',
					// 	date: '06-20 13:58',
					// 	contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
					// 	url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
					// 	allReply: 0,
					// 	likeNum: 150,
					// 	isLike: false
					// }
				];
			}

		}
	}
</script>

<style lang="scss" scoped>
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
	}

	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
